<!DOCTYPE html>
<html>
<head>
    <style>
        .box1{
            border: 3px solid black;
            width: 300px;
        }
    </style>
    <meta charset="UTF-8" />
    <title>document对象 方法/获取元素</title>
</head>
<body>
    <div class="box1">
        <ul type="none">
            <li>document对象获取页面元素的方法</li>
        </ul>
        <ol>
            <li>getElementsByTagName:搜索HTML标签名,返回一个类似数组的对象</li>
            <li>getElementsByClassName:使用class属性名来获取文本内容,返回一个类似数组的对象</li>
            <li>getElementsByName:使用name属性名来获取文本内容,返回一个类似数组的对象</li>
            <li>getElementByld:使用id属性名来获取文本内容</li>
            <li>querySelector:使用class选择器,有只返回第一个,没有返回NULL</li>
            <li>querySelectorAll:获取多个</li>
        </ol>
    </div>


    <!-- ---------------------------------------------------- -->

    <p>hello1</p>
    <h1>hello2</h1>
    <h1>hello3</h1>

    <h2 class="text">我喜欢你</h2>

    <form name="text2"></form>

    <h3 id="test3">哈哈哈</h3>

    <p class="nav">nav1</p>
    <p class="nav">nav2</p>
    <script>
        //1.利用标签名获取HTML内容

        var p_ret = document.getElementsByTagName('p');
        console.log(p_ret);//[p]
        
        var h1_ret = document.getElementsByTagName('h1');
        //如果数组中存在多个元素，只想读取指定的，可以在后面加上[位置]
        //如:document.getElementsByTagName('h1')[0]
        console.log(h1_ret);//[h1, h1]
        
        //如果想要修改HTML标签的内容
        //p_ret.innerHTML = "hello world";

        // -------------------------------------------------------------

        //2.用class属性名获取文本内容

        var class_ret = document.getElementsByClassName("text");
        console.log(class_ret);//[h2.text]
        //获取指定元素和改变元素与上面相同
        
        // -------------------------------------------------------------

        //3.用name属性名获取文本内容
        var name_ret = document.getElementsByName("test2");
        console.log(name_ret);//[]

        //-------------------------------------------------------------

        //4.用id属性名获取文本内容
        var id_ret = document.getElementById("test3");
        console.log(id_ret);//<h3 id="test3">哈哈哈</h3>
        //想要改变内容，和以上一样

        //---------------------------------------------------------------

        //获取一个:querySelector
        var ret = document.querySelector(".nav");
        console.log(ret);//<p class="nav">nav1</p>

        //获取多个:querySelectorAll
        var rets = document.querySelectorAll(".nav");
        console.log(rets);//[p.nav, p.nav]
        
    </script>
</body>
</html>